<template>
  <div id="mailTabs">
    <div class="full-control">
      <!-- 条件筛选 -->
      <div class="filterDiv">
        <span class="filter_font">条件筛选</span>
        <img
          class="filter_img"
          src="@/assets/images/mail/mail_filter.png"
          alt=""
        />
      </div>
      <!-- 下方tabs -->
      <div class="list">
        <md-list :md-expand-single="expandSingle">
          <!-- 所有分类 -->
          <md-list-item md-expand :md-expanded.sync="expandNews">
            <span class="md-list-item-text spanTitle">所有分类</span>
            <md-list slot="md-expand">
              <md-list-item
                class="md-inset"
                :class="{
                  isActive: mailTab === item.id,
                }"
                v-for="item in allProductsDetails"
                :key="item.id"
                @click="changeProduct(item)"
              >
                <div class="itemLink">
                  <img :src="item.image" />{{ item.name }}
                </div>
              </md-list-item>
            </md-list>
          </md-list-item>

          <!-- 专辑列表 -->
          <!-- <md-list-item md-expand :md-expanded.sync="expandNews2">
            <span class="md-list-item-text spanTitle">专辑列表</span>
            <md-list slot="md-expand">
              <md-list-item
                class="md-inset"
                :class="{
                  isActive: mailTab.id === item.id && mailTab.type === 'album',
                }"
                v-for="item in albumDetails"
                :key="item.id"
                @click="changeAlbum(item)"
              >
                <div class="itemLink">
                  <img :src="item.icon" />{{ item.name }}
                </div>
              </md-list-item>
            </md-list>
          </md-list-item> -->
        </md-list>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsCatesApi, getGoodsAlbumApi } from "@/api";
import { iscode } from "@/utils";
import { mapState, mapMutations } from "vuex";
export default {
  name: "MailTabs",
  data() {
    return {
      expandSingle: false, // list组件自带数据
      expandNews: true, // 全部分类是否展开状态
      expandNews2: true, // 专辑列表是否展开状态
      allProductsDetails: [
        {
          image: require("@/assets/images/mail/mail_all.png"),
          id: "",
          name: "全部",
        },
      ], // 所有分类的数据收纳
      // albumDetails: [], // 专辑列表的数据收纳
    };
  },
  computed: {
    ...mapState(["mailTab"]),
  },
  methods: {
    ...mapMutations(["choseMailTab"]),
    //获取商品分类
    async getGoodsCates() {
      let result = await getGoodsCatesApi();
      if (iscode(result)) {
        this.allProductsDetails = this.allProductsDetails.concat(
          result.result.list
        );
        this.allProductsDetails.map((item, index) => {
          if (item.id)
            this.$set(item, "image", result.result.show_url + item.icon);
        });
        if (window.localStorage.getItem("mailTab")) {
          this.choseMailTab(JSON.parse(window.localStorage.getItem("mailTab")));
        } else {
          if (this.allProductsDetails.length > 0) {
            this.choseMailTab("");
            window.localStorage.setItem("mailTab", JSON.stringify(""));
          }
        }
      }
    },
    //获取商品专辑
    async getGoodsAlbum() {
      let result = await getGoodsAlbumApi();
      if (iscode(result)) {
        this.albumDetails = result.result.list;
      }
    },

    // 自定义功能方法：切换tab选中
    changeProduct(item) {
      this.$bus.$emit("initPage");
      this.choseMailTab(item.id);
      window.localStorage.setItem("mailTab", JSON.stringify(item.id));
    },
    // changeAlbum(item) {
    //   this.$router.push("/mail/albumItem");
    //   this.choseMailTab({ id: item.id, type: "album" });
    //   window.localStorage.setItem(
    //     "mailTab",
    //     JSON.stringify({ id: item.id, type: "album" })
    //   );
    // },
  },
  mounted() {
    this.getGoodsCates();
    // this.getGoodsAlbum();
  },
};
</script>

<style lang="less" scoped>
#mailTabs {
  .full-control {
    // 头部条件筛选div
    .filterDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // max-width: 238px;
      height: 62px;
      background: #f2f2f2;
      .filter_font {
        margin-left: 24px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #373737;
        line-height: 26px;
      }
      .filter_img {
        margin-right: 18px;
        width: 16px;
        height: 16px;
      }
    }
    .list {
      // list的标题文字
      .spanTitle {
        padding-left: 8px;
        // height: 65px;
        line-height: 57px;
      }

      // 去除默认内边距
      .md-list {
        padding: 0;

        // 最里面的每个md-list-item
        .md-inset {
          // max-height: 40px;

          // router-link样式
          .itemLink {
            display: block;
            width: 100% !important;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #373737;
            // 小图标样式
            img {
              margin-right: 10px;
              width: 17px;
              height: 15px;
            }
          }
        }
      }
    }

    // 去除默认边框
    .md-list.md-theme-default .md-list-item-expand.md-active {
      border: 0;
    }
    // 去除默认内边距
    /deep/.md-list-item.md-inset .md-list-item-content {
      padding: 0;
      padding-left: 26px;
      // min-height: 40px;
    }

    // 被选中的颜色
    .isActive {
      background: #f0f8ff !important;
      color: #0b81ef !important;
    }
  }
}
</style>
